<template>
    <view class="page-container">
        <view class="grid">
            <view class="grid-item" v-for="(item, index) in list" :key="index" @click="navPage(item)">
                <text :class="`grid-icon hx-icon-${item.icon}`"></text>
                <view class="grid-name">{{ item.name }}</view>
            </view>
        </view>
        <gift-popup ref="gift" @give="give" />
    </view>
</template>

<script>
import giftPopup from "@/components/popup/gift"
import { mapGetters } from "vuex"
export default {
    components: { giftPopup },
    data() {
        return {
            list: [
                {
                    icon: "qiandao",
                    name: "签到",
                    value: 0
                },
                {
                    icon: "liwuhuodong",
                    name: "免费礼物",
                    value: 1
                },
                {
                    icon: "xiangji",
                    name: "播放视频",
                    value: 3
                },
                {
                    icon: "duobao1",
                    name: "幸运夺宝",
                    value: 4
                },
                {
                    icon: "wodehongbao",
                    name: "红包雨",
                    value: 5
                },
                {
                    icon: "yaoyiyao",
                    name: "摇一摇",
                    value: 6
                },
                {
                    icon: "youshanghuadong",
                    name: "划一划",
                    value: 7
                },
                // {
                //     icon: "baoxiang",
                //     name: "开宝箱",
                //     value: 8
                // },
                {
                    icon: "choujiang",
                    name: "抽奖",
                    value: 9
                },
                {
                    icon: "jichu",
                    name: "基础功能",
                    value: 10
                }
            ],
            aid: "",
            socket: ""
        }
    },
    computed: {
        ...mapGetters(["token"])
    },
    onLoad(options) {
        this.aid = options.aid
        this.initWss()
    },
    methods: {
        initWss() {
            try {
                const io = require("@/lib/weapp.socket.io")
                this.socket = io(`wss://screen.haixihudong.com?type=2&aid=${this.$pages().aid}`, {
                    // 显式指定websocket传输层
                    transports: ["websocket"],
                    reconnectionAttempts: 3, // 失败后重新连接次数，一直失败总共尝试四次
                    reconnectionDelay: 2000 //
                })
                this.socket.emit("balance", { type: "activity" })
                this.socket.on("gift", async res => {
                    this.$showToast("已发送")
                })
            } catch (error) {
                console.log(error)
            }
        },
        navPage(item) {
            if (item.value === 1) {
                return this.$refs.gift.open()
            }
            if (item.value === 3) {
                return this.socket.emit("toggle", { id: 14 })
            }
            this.$navPage(`./detail?id=${item.value}&aid=${this.aid}`)
        },
        give(item) {
            this.socket.emit("gift", { cmd: "play", id: item.id, free: 1 })
        }
    }
}
</script>
<style lang="scss" scoped>
.grid {
    margin: 30rpx;
    display: flex;
    flex-wrap: wrap;
    &-item {
        flex: 0 0 33.3%;
        height: 220rpx;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: $light-blue;
        border: 1px solid #fff;
    }
    &-icon {
        font-size: 60rpx;
        color: #fff;
    }
    &-name {
        margin-top: 10rpx;
        font-size: 36rpx;
        color: #fff;
    }
}
.popup-center {
    width: 600rpx;
}

.cell {
    &-item {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 92rpx;
        padding: 0 30rpx;

        &:not(:last-child)::after {
            @include _border;
        }
    }
    &-label {
        font-size: 32rpx;
        color: $orange;
    }
    &-icon {
        font-size: 32rpx;
        color: $light-blue;
    }
}
</style>
